<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="keywords" content="数码影音，beats耳机，击音耳机，漫步者，akg，潮牌，T恤，音乐生活，食品，服饰配件，礼品，礼物，礼盒，鲜花，ip周边，云音乐，商城，云贝">
   <meta name="description" content="云音乐商城是专注于音乐场景打造的音乐购物平台，包含音乐人周边、3c影音数码、音乐市集等，和我们一起让音乐购有趣，给生活加点料">
   <title>云音乐商城 - 音乐购有趣</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
   <link rel="stylesheet" href="./css/base.css">
   <link rel="stylesheet" href="./css/Shopping.css">
</head>

<body>
   <!-- 网页头部 -->
   <div class="mall-header">
      <div class="container">
         <div class="mall-logo">
            <a href="#"></a>
         </div>
         <div class="mall-search">
            <div class="search">
               <input type="text" placeholder="蓝牙耳机">
            </div>
            <div class="hotsearch">
               <h5>热门搜索</h5>
               <ul>
                  <li><a href="#">迪士尼Q2</a></li>
                  <li><a href="#">洗面奶</a></li>
                  <li><a href="#">护手霜</a></li>
                  <li><a href="#">真无线</a></li>
                  <li><a href="#">漫步者</a></li>
               </ul>
            </div>
         </div>
         <div class="mall-shoppingCart">
            <a href="#">
               <i class="iconfont icon-gouwuche"></i>
            </a>
         </div>
         <div class="mall-logister">
            <div class="logister">
               <a href="#">登录</a>
               <i class="iconfont icon-xiajiantou"></i>
            </div>
            <ul class="register">
               <li><a href="#"><i class="iconfont icon-shouji
                  "></i>手机号注册</a></li>
               <li><a href="#"><i class="iconfont icon-weixin"></i>微信登陆</a></li>
               <li><a href="#"><i class="iconfont icon-QQ"></i>QQ登录</a></li>
               <li><a href="#"><i class="iconfont icon-xinlang"></i>新浪微博登录</a></li>
               <li><a href="#"><i class="iconfont icon-pinpaibiaoshi_wangyiyouxiang"></i>网易邮箱账号登陆</a></li>
               <div class="triangle"></div>
            </ul>

         </div>
      </div>

   </div>
   <!-- 轮播图部分 -->
   <div class="mall-banner">
      <div class="container">
         <div class="banner">
            <img src="" alt="">
         </div>
         <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
         </ol>
      </div>
      <div class="prev"></div>
      <div class="next"></div>
   </div>
   <!-- 导航栏部分 -->
   <div class="mall-navs">
      <div class="container">
         <div class="ip nav">
            <a href="#">
               <div class="pic">
                  <img src="./images/IP.png" alt="">
               </div>
               <span>IP周边</span>
            </a>
         </div>
         <em class="line"></em>
         <div class="video nav">
            <a href="#">
               <div class="pic">
                  <img src="./images/video.png" alt="">
               </div>
               <span>数码影音</span>
            </a>
         </div>
         <em class="line"></em>
         <div class="hotsale nav">
            <a href="#">
               <div class="pic">
                  <img src="./images/hotsale.png" alt="">
               </div>
               <span>热销爆品</span>
            </a>
         </div>
         <em class="line"></em>
         <div class="jifen nav">
            <a href="#">
               <div class="pic">
                  <img src="./images/jifen.png" alt="">
               </div>
               <div class="yunbei">
                  <span class="m">云贝商城</span>
                  <span>0 云贝</span>
               </div>
            </a>
         </div>
      </div>
   </div>
   <!-- 两张图片展示部分 -->
   <div class="mall-pic container">
      <a href="#" class="left">
         <img src="./upload/shopping-show-1.jpg" alt="">
      </a>
      <a href="#" class="right">
         <img src="./upload/shopping-show-2.jpg" alt="">
      </a>
   </div>
   <!-- 编辑推荐部分 -->
   <div class="mall-recommend container">
      <div class="title">
         <h2>编辑推荐</h2>
      </div>
      <ul class="recommend-items clearfix">
         <script>
            let recommendGoods = [
               { disc: 0, title: 'Disney迪士尼正版授权P88 智能数显真无线半入耳式蓝牙耳机 开盖即连 轻盈小巧', price: 299 },
               { disc: '包邮', title: '迪士尼Q2真无线蓝牙耳机HIFI级音质取出即连迷你轻盈', price: 199 },
               { disc: '包邮', title: '纳百川颈椎按摩器肩颈部护颈仪按摩仪脖子送礼礼物颈椎仪', price: 279 },
               { disc: '热门', title: '联想击音【160小时续航+超级运动耳机】低延迟通话降噪游戏音乐运动无线蓝牙耳机苹果安卓VC', price: 299 },
               { disc: '包邮', title: '【预售】日常百搭潮流腰包SUP斜挎包运动包', price: 99 },
               { disc: 0, title: 'Disney迪士尼正版授权联名款运动真无线 冰壳 蓝牙耳机  持久续航 开盖即连 智能触控', price: 259 },
               { disc: 0, title: '珀莱雅氨基酸洗面奶淡化痘印祛痘深层清洁收缩毛孔补水保湿温和洁面乳学生', price: 99 }
            ]
            for (let i = 0; i < recommendGoods.length; i++) {
               document.write(`
         <li >
            <a href="#">
            <div class="pic">
               <img src="./upload/shopping-recommend-${i + 1}.jpg" alt="">
            </div>
            <div class="info">
               <p><span class="disc">${recommendGoods[i].disc}</span><a href="#">${recommendGoods[i].title}</a></p>
               <span class="price">￥${recommendGoods[i].price}</span>
            </div>
         </a>
         </li>`)
            }
            const disc = document.querySelectorAll('.recommend-items .info .disc')
            for (let i = 0; i < disc.length; i++) {
               if (disc[i].innerHTML === '0') {
                  disc[i].style.display = 'none'
               }
            }
         </script>
      </ul>
   </div>
   <!-- 数字专辑部分 -->
   <div class="mall-digital-album container">
      <div class="infos">
         <h2>数字专辑</h2>
         <p>(G)I-DLE、王嘉尔数字专辑火热售卖中</p>
         <a href="#">立即购买 &gt;</a>
      </div>
      <div class="album1"><img src="./upload/shopping-album-1.jpg" alt=""></div>
      <div class="album2"><img src="./upload/shopping-album-2.jpg" alt=""></div>
      <div class="album"></div>
   </div>
   <!-- 热门商品部分 -->
   <div class="mall-hotsale container">
      <div class="title">
         <h2>热门商品</h2>
      </div>
      <ul class="hotsale-items clearfix">
         <script>
            let hotsaleGoods = [
               { disc: 0, title: '漫步者 H230P 入耳式立体声耳机3.5mm插头手机通用线控带麦通话音乐耳塞', price: 69 },
               { disc: 0, title: '弯头数据线快充2.4A苹果安卓Type-C 玩游戏充电线', price: 39 },
               { disc: 0, title: '苹果安卓快充线数据线2.4A小米三星华为手机数据线（1米）', price: 39 },
               { disc: 0, title: '联想击音【5级主动降噪+蓝牙5.3】HIFI双降噪 超长续航 金属蓝牙头戴耳机K5', price: 499 },
               { disc: '热门', title: '漫步者 W800BT Plus 高通无线蓝牙5.1头戴式耳机手机通话降噪运动跑步健身耳麦', price: 199 },
               { disc: 0, title: '实木吉他U盘32g个性签名定制珍藏版', price: 119 },
               { disc: 0, title: '网易云音乐氧气有线入耳式耳机', price: 99 },
               { disc: 0, title: '漫步者（EDIFIER）K800 头戴式电脑语音通讯游戏耳机耳麦', price: 79 },
               { disc: 0, title: '铁三角 CKR50iS 入耳式线控带麦通话高解析手机音乐有线耳机', price: 428 },
               { disc: '热门', title: '迪士尼系列钥匙扣（史迪奇）', price: 29 },
               { disc: '特价', title: '网易云音乐银河星系笔记本', price: 29 },
               { disc: '特价', title: '网易云音乐经典红LOGO笔记本-A5', price: 19 },
               { disc: '包邮', title: '网易云音乐一键弹跳保温杯460ml', price: 99 },
               { disc: '热门', title: '迪士尼系列钥匙扣（草莓熊）', price: 39 },
               { disc: 0, title: '连帽拉链卫衣 守望先锋', price: 288 },
               { disc: '特价', title: '网易云音乐·玩趣黑胶气囊支架', price: 9.9 },
               { disc: 0, title: 'MOOD RESET 清新口腔喷雾', price: 29.9 },
               { disc: 0, title: '3A3U智能插线板', price: 59 },
               { disc: 0, title: '纪录片《河西走廊》原声音乐大碟-黑胶唱片', price: 298 },
               { disc: 0, title: '迪士尼系列钥匙扣（米奇）', price: 29 },
               { disc: 0, title: '轻松拥有小白牙 日式和风声波式电动牙刷', price: 139 },
               { disc: '热门', title: '网易云音乐高端黑科技铅笔', price: 26 },
               { disc: '热门', title: '网易云音乐精致中性笔', price: 23 },
               { disc: 0, title: '网易云音乐ANC降噪蓝牙真无线Clear Pods', price: 259 },
               { disc: '包邮', title: '网易云音乐温变马克杯', price: 69 },
               { disc: 0, title: '网易云音乐·音乐宇宙系列拼图-音乐宇宙款', price: 49 },
               { disc: 0, title: '阴阳师 御馔津手办', price: 1299 },
               { disc: '包邮', title: '网易云音乐ClearBuds降噪真无线耳机', price: 399 },
               { disc: '包邮', title: '网易云音乐·音乐有灵系列帆布袋', price: 59 },
               { disc: 0, title: '网易云音乐滴胶拨片项链 可扫可拨可当项链', price: 59 },
               { disc: 0, title: '携带登机，出行好友，20寸纯PC铝框箱', price: 369 },
               { disc: '包邮', title: '网易云音乐·金属筷乐笔', price: 49 },
               { disc: '热门', title: '网易云音乐高端钢笔', price: 65 },
               { disc: 0, title: '网易云音乐真无线蓝牙耳机Lite版', price: 159 },
               { disc: '包邮', title: '张杰《值得更好的》全新实体专辑', price: 120 },
               { disc: '包邮', title: '网易云音乐·音乐有灵系列温变马克杯', price: 69 },
               { disc: '特价', title: '网易云音乐享乐系列金色波纹自动折叠伞', price: 49 },
               { disc: 0, title: '云音乐定制IN系列intar民谣木吉他', price: 625 },
               { disc: 0, title: '网易云音乐车载蓝牙播放器快充版', price: 99 },
               { disc: '包邮', title: '网易云音乐高档软面A5笔记本', price: 109 },
               { disc: '包邮', title: '网易云音乐车载充电器MC01C', price: 79 },
               { disc: '包邮', title: '网易云音乐·复古系列编织本', price: 99 },
               { disc: 0, title: '网易云音乐氧气真无线蓝牙耳机ME08TWS', price: 179 },
               { disc: 0, title: '网易云音乐真无线蓝牙耳机ME09', price: 199 },
               { disc: 0, title: '网易云音乐氧气真无线通话降噪ME08TWS PRO', price: 199 },
               { disc: '包邮', title: '网易云音乐鹦鹉螺高保真HIFI耳机', price: 999 },
               { disc: '包邮', title: '网易云音乐高端宝珠笔', price: 96 },
               { disc: 0, title: '网易严选×网易云音乐清新口腔喷雾', price: 39 },
               { disc: '包邮', title: '网易云音乐氧气真无线蓝牙耳机ME06TWS', price: 299 },
               { disc: '特价', title: '网易云音乐·经典黑红logo金属笔', price: 9.9 },
               { disc: 0, title: '大英博物馆 海洋之心化妆刷套装', price: 299 },
               { disc: '特价', title: '网易云音乐·音乐有灵系列玻璃杯', price: 19 }
            ]
            for (let i = 0; i < hotsaleGoods.length; i++) {
               document.write(`
         <li >
            <a href="#">
            <div class="pic">
               <img src="./upload/shopping-good-${i + 1}.jpg" alt="">
            </div>
            <div class="info">
               <p><span class="disc">${hotsaleGoods[i].disc}</span><a href="#">${hotsaleGoods[i].title}</a></p>
               <span class="price">￥${hotsaleGoods[i].price}</span>
            </div>
         </a>
         </li>
        `)
            }
            const dis = document.querySelectorAll('.hotsale-items .info .disc')
            for (let i = 0; i < dis.length; i++) {
               if (dis[i].innerHTML === '0') {
                  dis[i].style.display = 'none'
               }
            }
         </script>
      </ul>
   </div>
   <!-- 网页底部部分 -->
   <div class="mall-footer">
      <div class="container">
         <div class="copyright">
            <p class="links">
               <a href="#">服务条款</a>
               <span>|</span>
               <a href="#">隐私政策</a>
               <span>|</span>
               <a href="#">儿童隐私政策</a>
               <span>|</span>
               <a href="#">版权投诉指引</a>
               <span>|</span>
               <a href="#">联系我们</a>
            </p>
            <p>网易公司版权所有©1997-2022杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</p>
            <p>食品经营许可证 出版物经营许可证 营业执照 网络食品交易第三方平台提供者信息备案: 浙网食A33010041 <a href="#" class="confirmation">进口冷链管理承诺书</a></p>
            <p>粤B2-20090191-18举报邮箱：工业和信息化部备案管理系统网站</p>
         </div>
         <ul class="nav">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
         </ul>
      </div>
   </div>
   <!-- 回到顶部部分 -->
   <div class="mall-tohead">
      <ul>
         <li><a href="#">查看<br>营业执照</a></li>
         <li>100%<br>正品</li>
         <li>七天无理<br>由退货</li>
         <li class="cart"><i class="iconfont icon-gouwuche"></i>
            <p>购物车</p>
         </li>
         <li class="kefu"><i class="iconfont icon-kefufenxiermaikefu"></i>
            <p>客服</p>
         </li>
      </ul>
      <div class="tohead">
         <a href="#"></a>
      </div>
   </div>
   <script>
      //网页头部搜索框部分
      const ipt = document.querySelector('.mall-search input')
      ipt.addEventListener('focus', function () {
         document.querySelector('.hotsearch').style.display = 'block'
      })
      ipt.addEventListener('blur', function () {
         document.querySelector('.hotsearch').style.display = 'none'
      })
      //登录部分
      const logister = document.querySelector('.mall-logister')
      logister.addEventListener('mouseenter', function () {
         document.querySelector('.register').style.display = 'block'
      })
      logister.addEventListener('mouseleave', function () {
         document.querySelector('.register').style.display = 'none'
      })
      // 轮播图部分
      let arr = ['#ffb12e', '#060202', '#77c2d7', '#f79149', '#cebca4', '#fe7541']
      let i = 0
      const bannerBgc = document.querySelector('.mall-banner')
      bannerBgc.style.backgroundColor = `${arr[0]}`
      const banner = document.querySelector('.mall-banner .banner img')
      banner.src = `./upload/shopping-banner-${i + 1}.jpg`
      const lis = document.querySelectorAll('.mall-banner ol li')
      function render(m) {
         banner.src = `./upload/shopping-banner-${m + 1}.jpg`
         bannerBgc.style.backgroundColor = `${arr[m]}`
         document.querySelector('.mall-banner li.active').classList.remove('active')
         lis[m].classList.add('active')
      }
      //左右箭头
      const prev = document.querySelector('.prev')
      const next = document.querySelector('.next')
      prev.addEventListener('click', function () {
         i--
         if (i < 0) i = arr.length - 1
         render(i)
      })
      next.addEventListener('click', function () {
         i++
         if (i > arr.length - 1) i = 0
         render(i)
      })
      let id = setInterval(function () {
         next.click()
      }, 2000)

      document.querySelector('.mall-banner').addEventListener('mouseenter', function () {
         clearInterval(id)
      })
      document.querySelector('.mall-banner').addEventListener('mouseleave', function () {
         id = setInterval(function () {
            next.click()
         }, 2000)
      })
      for (let j = 0; j < lis.length; j++) {
         lis[j].addEventListener('click', function () {
            render(j)
            i=j
         })
      }
      //回到顶部部分
      const box = document.querySelector('.mall-tohead')
      const tohead = document.querySelector('.tohead')
      const navs = document.querySelector('.mall-navs').offsetTop
      window.addEventListener('scroll', function () {
         const n = document.documentElement.scrollTop
         if (n >= navs) {
            box.classList.add('mall-wrap')
            tohead.style.display = 'block'
         } else {
            box.classList.remove('mall-wrap')
            tohead.style.display = 'none'
         }
      })
      tohead.addEventListener('click', function () {
         document.documentElement.scrollTop = 0
      })
   </script>
</body>

</html>